<!--
 * @Author: minglic minglic@foxmail.com
 * @Date: 2023-10-14 15:21:33
 * @LastEditors: minglic minglic@foxmail.com
 * @LastEditTime: 2023-10-21 16:41:31
 * @FilePath: \go2023\cmd\web\vue-element-admin\src\views\site\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="padding: 5px">
    <el-row>
      <div style="float: left">
        <el-input
          v-model="keyword"
          placeholder="关键字搜索"
          style="width: 200px"
        ></el-input>
        <el-button size="mini" @click="list">搜索</el-button>
      </div>
      <div style="float: right">
        <el-button size="mini" type="success" @click="create"
          >添加泵站</el-button
        >
      </div>
    </el-row>
    <el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column
          prop="manager"
          label="管理员"
          width="180"
        ></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="edit(scope.index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="remove(scope.index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 30, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-row>
      <el-dialog
        :title="dialogTitile"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <editor :site="site" @change="change" @close="closeDialog"></editor>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import editor from "@/views/site/components/edit.vue"; //引用一个自定义组件
import common from "@/utils/common";
import { test } from "@/api/test";
import { create, update, list, remove } from "@/api/site";
export default {
  components: {
    editor, //声明一个自定义组件
  },
  name: "",
  data() {
    return {
      keyword: "",
      page: 1,
      size: 10,
      total: 0,
      tableData: [],
      site: {},
      dialogTitile: "添加泵站",
      dialogVisible: false,
    };
  },
  created() {
    this.list();
  },
  methods: {
    handleSizeChange(val){
        this.size = val
        this.list()
    },
    handleCurrentChange(val){
        this.page = val
        this.list()
    },
    handleClose() {
      this.dialogVisible = false;
    },
    list() {
      let reqData = {
        keyword: this.keyword,
        page: this.page,
        size: this.size,
      };
      list(reqData).then((res) => {
        console.log(res);
        this.tableData = res.data.record;
        this.total = res.data.total;
      });
    },
    create() {
      this.dialogVisible = true;
      this.dialogTitile = "添加泵站";
      this.site = {};
    },
    edit(index, row) {
      this.dialogVisible = true;
      this.dialogTitile = "修改泵站信息";
      this.site = common.deepClone(row);
    },
    remove(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove({ id: row.id }).then((res) => {
            this.$message.success("删除成功");
            this.list();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    change() {
      this.list();
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>